import ProTable from "@ant-design/pro-table"
import { useProTable } from "../useTable"
import { useModel } from "../factory"
import { SysAddon, SysAddonMenu } from "@sker/model"
import { useModal } from "../useModal"
import { useState } from "react"
import { Input, Modal } from "antd"
import { CrudFilters } from "@refinedev/core"

export const AddonSelector: React.FC<{ onSelect: (key: string[]) => void }> = ({ onSelect }) => {
    const addon = useModel(SysAddon)
    const { props: addonProps, onChange } = useProTable('radio')
    onChange((keys) => {
        console.log({ keys })
        onSelect(keys)
    })
    return <ProTable
        rowKey={record => record.name}
        columns={[
            { title: '序号', dataIndex: 'aid' },
            { title: '应用', dataIndex: 'title' },
        ]} {...addonProps} request={async () => {
            return addon.find(['id', 'aid', 'title', 'name'], [], [{ field: 'aid', order: 'desc' }])
        }} />
}

export const AddonMenuSelector: React.FC<{ onSelect: (link: string, main: string, title: string, name: string) => void }> = ({ onSelect }) => {
    const { props: addonMenuProps, onChange } = useProTable('radio')
    const [addon, setAddon] = useState<string[]>([])
    onChange((keys, rows) => {
        if (keys && keys.length > 0) {
            const key = keys[0]
            const url = key.replace('@', '/')
            const main = `/${key}.js`
            const row = rows[0]
            const name = url.split('/').filter(it => !!it).map(it => `${it[0].toUpperCase()}${it.slice(1)}`).join('')
            onSelect(url, main, row.title, name)
        }
    })
    const addonMenu = useModel(SysAddonMenu)
    return <div className="flex">
        <div className="w-400px">
            <AddonSelector onSelect={e => setAddon(e)} />
        </div>
        <div className="flex-1 ml-24px">
            <ProTable rowKey={record => `${record.addon}/${record.url}`}
                params={{
                    addon
                }}
                columns={[
                    { title: '序号', dataIndex: 'amid' },
                    { title: '名称', dataIndex: 'title' },
                    { title: '链接', dataIndex: 'url' },
                    { title: '应用', dataIndex: 'addon' },
                    {
                        title: '操作', render(dom, entity, index, action, schema) {
                            return <a href={`${entity.addon.replace('@', '/')}/${entity.url}`} target={'_blank'}>访问</a>
                        },
                    },
                ]} {...addonMenuProps}
                request={async (params) => {
                    const filters: CrudFilters = [];
                    if (params.addon && params.addon.length > 0) {
                        filters.push({ field: 'addon', operator: 'in', value: params.addon })
                    }
                    return addonMenu.find(['id', 'amid', 'title', 'url', 'addon'], [
                        ...filters
                    ], [{ field: 'amid', order: 'desc' }], {
                        current: params.current,
                        pageSize: params.pageSize,
                    })
                }} />
        </div>
    </div>
}


export const AddonMenuSelectorButton: React.FC<{ value: string, onChange: (link: string, main: string, title: string, name: string) => void }> = ({ value, onChange }) => {
    const { props, setOpen } = useModal('选择链接')
    const [icon, setIcon] = useState<string>(value)
    return <>
        <Modal {...props} width={'1200px'}>
            <AddonMenuSelector onSelect={(e, main, title, name) => {
                setIcon(e)
                onChange(e, main, title, name)
                setOpen(false)
            }} />
        </Modal>
        <Input readOnly aria-readonly={true} value={icon} style={{ cursor: 'pointer', backgroundColor: '#efefef' }} placeholder="请选择链接" onClick={e => setOpen(true)} />
    </>
}